<template>
	<view>
		<itu-barrage :list="barrageList" :row="3">
			<template v-slot:scope="{item}">
				<view class="barrage">{{item.title}}</view>
			</template>
		</itu-barrage>
		<view class="itu-demo">
			<view class="itu-demo-wrap">
				<view class="itu-demo-title">演示效果</view>
				<view class="itu-demo-area">
					<view class="itu-demo-result-line">用于商品详情/活动详情页展示用户消费消息</view>
				</view>
			</view>
			<subsection :list="list" v-model="current" @change="handleChange"></subsection>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '增加数据'
					},
					{
						name: '减少数据'
					}
				],
				current: 0,
				barrageList: [
					{ id: 1, image: '', title: '用户18*购买了商品' },
				]
			}
		},
		onLoad({ title }) {
			this.setNavigationBarTitle(title)
		},
		methods: {
			handleChange(val) {
				if (val === 0) {
					const id = new Date().getTime()
					this.barrageList.push({ id: id, image: '', title: `${id}购买了商品` })
				} else {
					if (this.barrageList) this.barrageList.splice(this.barrageList.length - 1, 1)
				}
			}
		}
	}
</script>

<style>
	.barrage {
		width: 330rpx;
		background-color: rgba(0, 0, 0, .5);
		color: #FFF;
		border-radius: 25rpx;
		margin-bottom: 10rpx;
		font-size: 24rpx;
		padding: 5rpx 10rpx;
	}
</style>